<template>
    <el-container class="content">
        <el-header class="header">
            <el-row style="height: 100%" justify="end" align="middle">
                <el-col :span="2">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ user.username }}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container class="content">
            <el-aside width="200px" class="aside">
                <el-menu @select="handleSelect" background-color="#545c64" text-color="#fff">
                    <el-menu-item index="dispatch">设备调度</el-menu-item>
                    <el-menu-item index="equipment">设备管理</el-menu-item>
                    <el-menu-item index="statistics">数据统计</el-menu-item>
                    <el-menu-item index="user">用户管理</el-menu-item>
                    <el-menu-item index="permission">权限分配</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="main">
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">

import { RouterView, useRouter } from 'vue-router';
import { ElMessage } from "element-plus"
import { ArrowDown } from "@element-plus/icons-vue"
import { get } from '../../util/localStorage';

const router = useRouter()
const user = get("user")
const handleSelect = (key: string) => {
    router.push(`/index/${key}`)
}

const handleCommand = (command: string | number | object) => {
    // ElMessage(`click on item ${command}`)
}

</script>

<style scoped>
.header {
    height: 60px;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
}

.content {
    height: 100%;
}

.aside {
    width: 200px;
}

.aside:deep(.el-menu) {
    height: 100%;
}

.main {
    padding: 0;
}
</style>